import React from 'react'
import Icon from '@/components/Icon'
import styles from './index.module.scss'
import { useNavigate } from 'react-router-dom'
import classNames from 'classnames'

export default function NavBar({
  children,
  extra,
  onLeftClick,
  onRigthClick,
  className,
}) {
  const navigate = useNavigate()
  const Clicks = () => {
    if (onLeftClick) {
      onLeftClick()
    } else {
      navigate(-1)
    }
  }
  return (
    <div className={classNames(styles.root, className)}>
      {/* 后退按钮 */}
      <div className="left">
        <Icon type="iconfanhui" onClick={Clicks} />
      </div>
      {/* 居中标题 */}
      <div className="title">{children}</div>

      {/* 右侧内容 */}
      <div className="right" onClick={onRigthClick}>
        {extra}
      </div>
    </div>
  )
}
